<template>
	<div style="height: 100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; background-color:#87CFFF;">
		<div style="display: flex;background-color:white;width: 50%; border-radius: 5px; overflow: hidden">
			<div style="flex:1">
				<img src="../../static/Login.png" alt="" style="width:100%">
			</div>
			<div style="flex:1;display: flex;align-items: center;justify-content: center;">
				<el-form :model="user" style="width: 80%;" :rules="rules" ref="loginRef">
					<div style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px;">欢迎登录万物互联平台</div>
					<el-form-item prop="UserName">
						<el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="user.UserName"></el-input>
					</el-form-item>
					<el-form-item prop="UserPwd">
						<el-input prefix-icon="el-icon-lock" show-password placeholder="请输入密码" v-model="user.UserPwd"></el-input>
					</el-form-item>
					<el-form-item prop="code">
						<div style="display: flex; height: 40px;">
							<el-input prefix-icon="el-icon-circle-check" style="flex:1" placeholder="请输入验证码" v-model="user.code"></el-input>
							<div style="flex:1">
								<valid-code @update:value="getCode" ></valid-code>
							</div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
					</el-form-item>
					<div style="display: flex;">
						<div style="flex: 1;">还没有账号？请<span style="color: #87CFFF;cursor: pointer;" @click="$router.push('/register')">注册</span></div>
						<div style="flex: 1; text-align: right;"><span style="color: #87CFFF;cursor: pointer;">忘记密码</span></div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import ValidCode from "../ValidCode/ValidCode.vue";

    export default {
	name:"LoginUser",
	components: {
		ValidCode
	},
	data(){
		//验证码校验
		const validateCode = (rule, value, callback) => {
			if(value === ''){
				callback(new Error('请输入验证码'))
			}else if(value.toLowerCase() !== this.code){
				callback(new Error('验证码错误'))
			}else{
				callback()
			}
		}
		
		return {
			code:'',//验证码组件传递过来的code
			user:{
				code:'',//表单用户输入的code
				UserName:'',
				UserPwd:''
			},
			rules:{
				UserName:[{
					required: true, message:'请输入用户名',trigger:'blur'
				}],
				UserPwd:[{
					required: true, message:'请输入密码',trigger:'blur'
				}],
				code:[{
					validator:validateCode,trigger:'blur'
				}]
			}
		}
	},
	methods:{
		login(){
			this.$refs['loginRef'].validate((valid) => {
				if (valid) {
					//验证通过才能请求
					this.$request.post('/userLogin', this.user).then(res => {
						console.log(res)
					if (res.code === '200'){
						if (this.$route.path !== '/Main') {
							this.$router.push('/Main');
						}
						this.$message.success('登录成功')
						localStorage.setItem("honey-user", JSON.stringify(res.data))//存储用户数据
					} else {
						this.$message.error(res.msg);
						if (this.$route.path !== '/') {
							this.$router.push('/');
						}
					}
				});
			}
		})
		},
		getCode(code){
			this.code = code.toLowerCase()
		}
	}
	}

</script>
  
<style scoped>
	
</style>